<template>
	<view>
		<uni-popup ref="confirmDialog" type="center" :maskClick="false">
			<view class="dialog-area ac">
				<view class="fs34 title">{{title}}</view>
				<view class="fs26 text-opacity name-color lh15 al content">{{content}}</view>
				
				<view class="btn-group flex flex-ver">
					<view class="fs34 confirm-btn-color flex-1 red" @click="confirm">{{confirmText}}</view>
					<view class="fs34 cancel-btn-color flex-1" @click="cancel">{{cancelText}}</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		data() {
			return {
				
			}
		},
		props: {
			title:{
				type:[String],
				default:'解绑银行卡'
			},
			content:{
				type:[String],
				default:'解绑后，若提现至此银行卡需重新绑定'
			},
			cancelText:{
				type:[String],
				default:'取消'
			},
			confirmText:{
				type:[String],
				default:'确认解绑'
			},
		},
		computed: {

		},
		components: {
			uniPopup
		},
		created() {
			
		},
		mounted() {
			// this.$refs.confirmDialog.open();
		},
		methods: {
			open(){
				this.$refs.confirmDialog.open();
			},
			close(){
				this.$refs.confirmDialog.close();
			},
			cancel(){
				this.$emit('cancel');
				this.close();
			},
			confirm(){
				this.$emit('confirm');
				this.close();
			}
		}
	}
</script>

<style lang="scss">
	.dialog-area{
		width: 554rpx;
		height:320rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding-top:48rpx;
		.btn-group{
			height:90rpx;
			border-top:1rpx solid #F7F7F7;
			width: 100%;
			position: absolute;
			bottom:0;left:0;
			view{
				height:100%;
				line-height: 90rpx;
				&:first-child{
					border-right:1rpx solid #F7F7F7;
				}
			}
			
		}
		.title{
			margin-bottom:30rpx;
		}
		.content{
			padding:0 49rpx;
		}
	}
</style>
